@use 'var' as *;
*, :before, :after {
  box-sizing: border-box;
}
a {
  font-weight: 500;
  color: var(--van-primary-color);
  text-decoration: inherit;
}
a:hover {
  color: var(--nav-bg-color);
}
html{
  height:100%;
}
body {
  margin: 0; padding: 0;
  place-items: center;
  font-family: var(--font-family-base);
  width: 100%;
  height:100%;
  min-width: 320px;
  background-color:var(--body-bg-color);
  color: var(--font-first-color);
  font-size: var(--base-font-size);
  line-height: 1.2;
  font-synthesis: none;
  text-rendering: auto; /*不能用optimizeLegibility，否则斜体字会失效*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*点击元素后闪烁、有半透明背景*/
}

/*以下为normalize的内容*/
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}

a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: var(--nav-font-color);
  color: var(--nav-bg-color);
  text-decoration: none;
}

mark {
  background-color: var(--nav-font-color);
  color: var(--nav-bg-color);
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted var(--nav-bg-color);
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--nav-font-color);
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #fff inset !important; font-size:inherit}

#app{font-size: var(--base-font-size);}
.page{min-height:100%;
  //flex:1;display:flex; flex-direction: column;
} /*每个路由views页面的视窗高度for过场动画*/
.flex{display: flex; align-items: center}
.mg16{margin:16px;}
.mg10{margin:10px!important;}
.mgb5{margin-bottom:5px!important;}
.mgb10{margin-bottom:10px!important;}
.mgb20{margin-bottom:20px!important;}
.mgt10{margin-top:10px!important;}
.mgt20{margin-top:20px!important;}
.mgl10{margin-left:10px}
.mgl20{margin-left:20px}
.mgr20{margin-right:20px}
.mgr10{margin-right:10px}
.mgl5{margin-left:5px}
.mgr5{margin-right:5px}
.pd10{padding:10px;}
.pd16{padding:16px;}
.pd20{padding:20px;}
.flex{
  display:flex;
  align-items: center;
}
.flex-reverse{
  display:flex;
  align-items: center;
  flex-direction: row-reverse;
}
.flex-justify{
  justify-content: space-between;
}
.flex-1{
  flex:1;
}
.txt-primary{
  color:var(--van-primary-color)!important;
}
.txt-info{
  color:var(--van-info-color)!important;
}
.txt-success{
  color:var(--van-success-color)!important;
}
.txt-warning{
  color:var(--van-warning-color)!important;
}
.txt-danger{
  color:var(--van-danger-color)!important;
}
.txt-unicom{
  color:var(--van-unicom-color)!important;
}
.txt-disable{
  color:var(--font-disable-color)!important;
}
.txt-gray{
  color:var(--font-third-color)!important;
}
.font-12{
  font-size:12px;
}
.font-13{
  font-size:13px;
}
.font-14{
  font-size:14px;
}
.font-16{
  font-size: 16px;
}
.font-18{
  font-size: 18px!important;
}
.font-20{
  font-size: 20px;
}
.image-slot{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--nav-font-color);
  color: var(--nav-bg-color);
  font-size: 30px;
}
.goods-list{
  padding:0;margin:10px 0 0 10px;flex-wrap:wrap;display:flex;
  &>.goods-item{padding:0 10px 10px 0;width:50%;}
  //&.block{column-count:2;column-gap:10px;}
  &.flat>.goods-item{width:100%;}
}
.panel{
  background-color:var(--white-color);
  padding:16px; border-radius: 8px; margin:10px;
}
.panel-title{
  padding-bottom:16px;line-height:1;display:flex; align-items: center; justify-content: space-between;
  h3{font-size:16px;}
}
.cell-group-title{
  padding:10px;display:flex; align-items: center; justify-content: space-between;
  label{font-weight:bold;font-size:14px;}
}
.case-title{
  text-align: center; padding-top:10px; display:flex;align-items: center;justify-content: center;margin:0 10px;
  color:var(--van-primary-color);
  span{
    position:relative;
    display:flex;
    width:40px;
    height:1px;
    vertical-align: top;
    background-color:var(--van-primary-color);
    i,em{
      position: absolute; top:-2px; width:5px; height:5px; display:block;overflow:hidden; border-radius:80%;
      background-color:var(--van-primary-color);
    }
    i{right:0;}
    em{left:0;}
  }
  h3{
    display:flex; padding:0 16px; font-size:16px; vertical-align: top; font-weight: 500;
  }
}
.van-slide-left-leave-to,.van-slide-right-leave-to{
  display: none!important;
}
.popover-short-width{
  --van-popover-action-width:88px;
}
//底部上拉功能栏的标题
.van-action-sheet__header{
  border-bottom:1px solid var(--van-cell-border-color);
}

//侧边、底部拉出的功能栏的提交按钮
.drawer-aside{height:100%;width:70%;}
.drawer-bottom{width:100%;height:84%;}
.drawer-aside,.drawer-bottom{
  .main-wrap{
    width:100%;margin-bottom:calc(50px + env(safe-area-inset-bottom));
    overflow-x:hidden; overflow-y:auto;
  }
}
.drawer-btn{
  width:100%;height:50px;display:flex;align-items: center;padding:0 16px;position:fixed;bottom:0;right:0;
  background-color:var(--white-color);
  .van-button{height:36px;}
  .button-first{
    background:var(--van-action-bar-button-warning-color);
    border-radius: 20px 0 0 20px;border-width:0!important;
  }
  .button-last{
    background:var(--van-primary-color);
    border-radius: 0 20px 20px 0;border-width:0!important;
  }
}

//sku上拉sheet的背景色
.sku-popup{
  --van-popup-background:var(--van-image-placeholder-background);
  //--van-popup-background:var(--body-bg-color);
}
//几种滚动到顶部组件的样式
.app-back-top{
  width:38px!important;height:38px!important; border-radius: 24px!important;
  left:0;top:0; box-shadow:none!important; position: absolute!important;
  background: linear-gradient(240deg, var(--van-unicom-color) 0%,var(--van-primary-color) 50%, var(--van-warning-color) 130% );
  .iconfont{color:var(--white-color);font-size:26px;}
}
.base-back-top{
  width:36px!important;height:36px!important; border-radius: 24px!important; opacity: .8;
  right:10px!important;bottom:calc(54px + env(safe-area-inset-bottom))!important; border:1px solid var(--border-color);
  background-color:var(--white-color)!important;color:var(--font-second-color)!important;
}
.bottom1{
  bottom:calc(10px + env(safe-area-inset-bottom))!important
}
.bottom2{
  bottom:calc(60px + env(safe-area-inset-bottom))!important
}
.bottom3{
  bottom:calc(110px + env(safe-area-inset-bottom))!important
}
//上拉动作框中最下边的按钮定义区
.sheet-btn-wrap{
  height:calc(50px + env(safe-area-inset-bottom));position:absolute;bottom:0;left:0;right:0;background:var(--white-color);
  padding:5px 12px calc(5px + env(safe-area-inset-bottom));display:flex;
  .van-button{height:40px;border:none;}
}